<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graph</title>
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/scholar/scholar.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/scholar/analysis.css">
    <link rel="stylesheet" href="../css/scholar/wisdomAtlas.css">
    <link rel="stylesheet" href="../css/dataGalaxy/index.css"/>
    <link rel="stylesheet" href="../css/dataGalaxy/dg-scholar.css"/>
    <style>
        .node {
            stroke: #fff;
            stroke-width: 0.5px;
        }

        .link {
            stroke: #999;
            stroke-opacity: .6;
        }

        .cell {
            fill: none;
            stroke: grey;
        }

    </style>
</head>
<body style="background-color: #eef3fa; overflow: hidden;">
<div class="content" id="box" v-cloak>
    <div class="top">
        <span class="return">
            <a :href="'searchList.html?keyword='+keyword+'&zh_keyword='+zh_keyword">
            <i class="fa fa-reply" aria-hidden="true"></i></a>
        </span>
        <!--<span class="analysis-logo">NexMagic scholar</span>-->
        <span class="analysis-logo"><img src="../img/scholar/logo1.png" style="height:25px;margin-bottom:15px;"/></span>
    </div>
    <div class="content-all">
        <div class="content-menu">
            <ul>
                <li class="menu-li"><a :href="'analysis.html?version=' + timestamp_"><i class="fa fa-home"></i><span>Home</span></a>
                </li>
                <li class="menu-li"><a :href="'learning.html?version=' + timestamp_"><i class="fa fa-book"></i><span>Academics</span></a>
                </li>
                <li class="menu-li checked"><a :href="'wisdomAtlas_d3.html?version=' + timestamp_"><i
                        class="fa fa-asterisk"></i><span>Graph</span></a>
                </li>
                <li class="menu-li"><a :href="'discovery.html?version=' + timestamp_"><i
                        class="fa fa-compass"></i><span>Find</span></a></li>
            </ul>
        </div>
        <div class="row">
            <div class="content-right">
                <div class="col-md-2 userinfo">
                    <div>
                        <img class="userinfo-head" onerror="nofind(this)"
                             :src="(expert.img != undefined && expert.img != '' && expert.img != null)?(resourceUrl + expert.img):'../img/scholar/head/common-head.png'">
                    </div>
                    <div class="userinfo-span realname" style="margin-bottom: 10px" @click="controlInfo();">
                        <span title="Stephen Hawking">{{expert.name}}</span><i
                            :class="showInfoFlag?'fa fa-chevron-up':'fa fa-chevron-down'"></i>
                    </div>
                    <div v-if="showInfoFlag" class="userInfo-detail">
                        <span class="userinfo-span"><i class="fa fa-briefcase"></i> {{expert.position != undefined ? expert.position : ''}}</span>
                        <span class="userinfo-span"><i class="fa fa-map-marker"></i> {{expert.country != undefined ? expert.country : ''}}</span>
                        <span class="userinfo-span"><i class="fa fa-home"></i> {{expert.authorsOrg}}</span>
                        <div class="skill-div">
                            <span class="skill-item" v-for="(item, index) in expert.foSets"
                                  v-if="index < 5">{{item}}</span>
                        </div>
                    </div>
                    <hr/>
                    <div class="userinfo-table">
                        <table>
                            <tr>
                                <td>N-index:</td>
                                <td>{{expert.nIndex!=undefined?(expert.nIndex).toFixed(2):0}}</td>
                                <td><img id="nIndex-img" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>A-index:</td>
                                <td>{{expert.aIndex!=undefined?(expert.aIndex*100).toFixed(2):0}}</td>
                                <td><img id="aIndex-img" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>I-index:</td>
                                <td>{{expert.iIndex!=undefined?(expert.iIndex).toFixed(2):40.00}}</td>
                                <td><img id="iIndex-img" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>P-index:</td>
                                <td>{{expert.pIndex!=undefined?(expert.pIndex).toFixed(2):50.00}}</td>
                                <td><img id="pIndex-img" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>#Publications:</td>
                                <td>{{publication}}</td>
                            </tr>
                            <tr>
                                <td>#Citation:</td>
                                <td>{{expert.citations!=undefined?expert.citations:0}}</td>
                            </tr>
                        </table>
                    </div>
                    <hr/>
                    <span class="userInfo-ul" @click="transToAll()">
                        <p :class="atlasMenus=='all'?'selected':''">
                            <i class="fa fa-trophy"></i>
                            All({{scholarRelationNum + institutionRelation.nodes.length + fieldRelation.nodes.length}})
                            <i></i>
                        </p>
                        <hr/>
                    </span>
                    <span class="userInfo-ul" @click="transToScholar()">
                        <p :class="atlasMenus=='scholar'?'selected':''">
                            <i class="fa fa-user"></i>
                            Scholars({{scholarRelationNum}})
                            <i></i>
                        </p>
                        <hr/>
                    </span>
                    <span class="userInfo-ul" @click="transToInstitution()">
                        <p :class="atlasMenus=='institution'?'selected':''">
                            <i class="fa fa-share-alt"></i>
                            Institutions({{institutionRelation.nodes.length - 1}})
                            <i></i>
                        </p>
                        <hr/>
                    </span>
                    <span class="userInfo-ul" @click="transToField()">
                        <p :class="atlasMenus=='field'?'selected':''">
                            <i class="fa fa-sitemap"></i>
                            Fields({{fieldRelation.nodes.length - 1}})
                            <i></i>
                        </p>
                        <hr/>
                    </span>
                </div>

                <div class="col-md-10 chart-main">
                    <div class="content-chart">
                        <div class="chart-box" style="height: 100%;">
                            <ul class="classifyBall-box">
                                <li>
                                    <div class="ball-box">
                                        <i class="ball color6"></i>
                                    </div>
                                    <label>Paper Co-authors</label>
                                </li>
                                <li>
                                    <div class="ball-box">
                                        <i class="ball color1"></i>
                                    </div>
                                    <label>Book Co-authors</label>
                                </li>
                                <li>
                                    <div class="ball-box">
                                        <i class="ball color2"></i>
                                    </div>
                                    <label>Patent Co-authors</label>
                                </li>
                                <li>
                                    <div class="ball-box">
                                        <i class="ball color4"></i>
                                    </div>
                                    <label>Institutions</label>
                                </li>
                                <li>
                                    <div class="ball-box">
                                        <i class="ball color3"></i>
                                    </div>
                                    <label>Fields</label>
                                </li>
                                <li>
                                    <div class="ball-box"></div>
                                    <label for="biaoqian">Node Label</label>
                                    <input type="checkbox" class="showTips" id="biaoqian" >
                                </li>
                            </ul>
                            <!--<ul class="tools">
                                <li><img src="../img/icons/plus.png"/></li>
                                <li><img src="../img/icons/minus.png"/></li>
                                <li><img src="../img/icons/refresh.png"/></li>
                            </ul>-->
                            <!--<div id="atlas"></div>-->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <span class="bottom-left">中译语通科技股份有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span>
        <span class="bottom-right">Copyright © 2018-京ICP备13002826号-9</span>
    </div>
</div>
<div id="atlas" style="position: fixed;top:55px;left: 21%;right: 0;bottom: 40px;"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/d3/d3.v4.js"></script>
<script src="../js/d3/forceInABox.js"></script>
<script src="../js/d3/wisdomAtlas_d3_group.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    var KingVue = new Vue({
        el: '#box',
        data: {
            resourceUrl: "",
            expert: {},
            showInfoFlag: false,
            textNum: 4,
            scrollWidth: 0,
            atlasMenus: "scholar",
            dataPrepare: 0, // 三种数据，每次ajax请求到后都为其+1
            scholarRelation: {},
            scholarRelationNum: 0,
            institutionRelation: {nodes: []},
            fieldRelation: {nodes: []},
            keyword: "",
            zh_keyword: "",
            publication: 0,
            timestamp_: new Date().getTime()
        },
        mounted: function () {
            var _this = this;
            _this.resourceUrl = gAjax.resourceUrl;
            _this.expert = getStorage("scholar_expertDetail");
            _this.expert.foSets = _this.expert.foSets.slice(0, 20);

            //this.scrollWidth = 450 * this.textNum;

            _this.keyword = getStorage("scholar_searchKeyword");
            _this.zh_keyword = encodeURI(_this.keyword)

            /*判断默认显示’专家之间关系‘或‘专家与机构关系’*/
            _this.initData();

            var jnum = _this.expert.jnum != undefined && _this.expert.jnum >= 0 ? _this.expert.jnum : 0;
            var cnum = _this.expert.cnum != undefined && _this.expert.cnum >= 0 ? _this.expert.cnum : 0;
            var bnum = _this.expert.bnum != undefined && _this.expert.bnum >= 0 ? _this.expert.bnum : 0;
            var patentnum = _this.expert.patentnum != undefined && _this.expert.patentnum >= 0 ? _this.expert.patentnum : 0;
            var sum = jnum + cnum + bnum + patentnum;
            _this.publication = sum;

            $("#nIndex-img").attr("src", getStorage("nIndex-img"));
            $("#aIndex-img").attr("src", getStorage("aIndex-img"));
            $("#iIndex-img").attr("src", getStorage("iIndex-img"));
            $("#pIndex-img").attr("src", getStorage("pIndex-img"));
        },
        methods: {
            controlInfo: function () {
                var _this = this;
                _this.showInfoFlag = !_this.showInfoFlag;
            },
            turnMove: function (flag) {
                scrollWheel(flag);
            },
            initData: function () {
                var _this = this;
                gAjax.request("org/getRelateOrg", {id: _this.expert.id}).then(function (result) {
                    // 数据处理成d3格式
                    var root = {
                        nodes: [{
                            name: _this.expert.name,
                            image: _this.expert.img != undefined ? (_this.resourceUrl + _this.expert.img) : '../img/scholar/head/common-head.png',
                            group: 0
                        }],
                        links: []
                    };
                    result.forEach(function (org) {
                        var index = root.nodes.push({
                            name: org.name,
                            image: '../img/dataGalaxy/4.png',
                            group: 1
                        });
                        root.links.push({
                            source: 0,
                            target: index - 1,
                            group: 1
                        });
                    });
                    _this.institutionRelation = root;
                    _this.dataPrepare++;
                });
                gAjax.requestNoAsync("expert/getRelateExpert", {id: _this.expert.id}).then(function (result) {
                    // 数据处理成d3格式
                    var root = {
                        nodes: [{
                            name: _this.expert.name,
                            image: _this.expert.img != undefined ? (_this.resourceUrl + _this.expert.img) : '../img/scholar/head/common-head.png',
                            group: 0
                        }],
                        links: []
                    };
                    for (var key in result) {
                        var expert_l = result[key];
                        expert_l.forEach(function (expert) {
                            var thirdIndex = root.nodes.push({
                                scholarId: expert.id,
                                name: expert.name,
                                image: expert.img == undefined ? "../img/dataGalaxy/" + (key == "publish" ? "6" : key == "write" ? "1" : "2") + ".png" : _this.resourceUrl + expert.img,
                                group: key == "publish" ? 2 : key == "write" ? 3 : 4
                            });
                            root.links.push({
                                source: 0,
                                target: thirdIndex - 1,
                                group: key == "publish" ? 2 : key == "write" ? 3 : 4
                            });
                        })
                    }

                    _this.scholarRelation = root;
                    _this.dataPrepare++;
                });

                // 人物领域
                var root_f = {
                    nodes: [{
                        name: _this.expert.name,
                        image: _this.expert.img != undefined ? (_this.resourceUrl + _this.expert.img) : '../img/scholar/head/common-head.png',
                        group: 0
                    }],
                    links: []
                };
                _this.expert.foSets.forEach(function (field) {
                    var index = root_f.nodes.push({
                        name: field,
                        image: "../img/dataGalaxy/3.png",
                        group: 5
                    });
                    root_f.links.push({
                        source: 0,
                        target: index - 1,
                        group: 5
                    });
                });
                _this.fieldRelation = root_f;
                _this.dataPrepare++;
            },
            transToScholar: function (flag) {
                var _this = this;
                if (flag) {
                    return _this.scholarRelation;
                } else if (_this.atlasMenus != "scholar") {
                    _this.atlasMenus = "scholar";
                    _this.showGraph(_this.scholarRelation);
                }
            },
            transToInstitution: function (flag) {
                var _this = this;
                if (flag) {
                    return _this.institutionRelation;
                } else if (_this.atlasMenus != "institution") {
                    _this.atlasMenus = "institution";
                    _this.showGraph(_this.institutionRelation);
                }
            },
            transToField: function (flag) {
                var _this = this;
                if (flag) {
                    return _this.fieldRelation;
                } else if (_this.atlasMenus != "field") {
                    _this.atlasMenus = "field";
                    _this.showGraph(_this.fieldRelation);
                }

            },
            transToAll: function () {
                var _this = this;
                if (_this.atlasMenus != "all") {
                    /*将三种数据组合*/
                    var root = JSON.parse(JSON.stringify(_this.transToScholar(true)));

                    var nodesLength = root.nodes.length;
                    var institution = JSON.parse(JSON.stringify(_this.transToInstitution(true)));
                    root.nodes.push.apply(root.nodes, (institution.nodes).slice(1));// 去除第一个节点
                    for (var i in institution.links) {
                        var obj = (institution.links)[i];
                        obj.source = obj.source == 0 ? 0 : (obj.source + nodesLength - 1);
                        obj.target = obj.target + nodesLength - 1;
                    }
                    root.links.push.apply(root.links, institution.links);

                    var nodesLength2 = root.nodes.length;
                    var field = JSON.parse(JSON.stringify(_this.transToField(true)));
                    root.nodes.push.apply(root.nodes, (field.nodes).slice(1));// 去除第一个节点
                    for (var i in field.links) {
                        var obj = (field.links)[i];
                        obj.source = obj.source == 0 ? 0 : (obj.source + nodesLength2 - 1);
                        obj.target = obj.target + nodesLength2 - 1;
                    }
                    root.links.push.apply(root.links, field.links);

                    _this.atlasMenus = "all";
                    _this.showGraph(root);
                }
            },
            showGraph: function (root) {
                $("#atlas").html("");
                initGraph(JSON.stringify(root));
            }
        },
        watch: {
            scholarRelation: function () {
                var _this = this;
                _this.scholarRelationNum = _this.scholarRelation.nodes.length
                if (getUrlParam("atlasType") == "scholar") {
                    _this.transToScholar();
                }
            },
            institutionRelation: function (value, value1) {
                var _this = this;
                if (getUrlParam("atlasType") == "institution") {
                    _this.transToInstitution();
                }
            },
            dataPrepare: function () {/*默认显示all，需三种数据全部加载完成*/
                var _this = this;
                if (_this.dataPrepare == 3 && getUrlParam("atlasType") == undefined) {
                    _this.transToAll();
                }
            }
        }
    });
    //Lable标签显示
    $(document).on('change', $('#biaoqian'), function () {
        if ($('#biaoqian').prop('checked') === true) {
            $("text").show();
        } else {
            $("text").hide();
        }
    })
</script>
</body>
</html>